<template>
  <div class="flight">
    <!-- 飞机统计 -->
    <div class="flight-fly">
      <div class="fly-top" v-if="seasonData">
        <p class="fly-top-title">本季度飞行</p>
        <div class="fly-top-item">
          <img src="@/assets/img/census/icon_time.png" alt="" />
          <div class="fly-top-num">
            <p>本季度里程</p>
            <p>
              <span>{{ seasonData.meter.toFixed(2) }}</span
              >km
            </p>
          </div>
          <div class="fly-top-mom">
            <p>
              <img v-if="meterSeasonCompare === 'up'" src="@/assets/img/census/green_up.png" alt="" />
              <img v-if="meterSeasonCompare === 'down'" src="@/assets/img/census/green_down.png" alt="" />{{
                meterSeason
              }}%
            </p>
            <span>与上季度比</span>
          </div>
        </div>
        <div class="fly-top-item">
          <img src="@/assets/img/census/icon_area_small.png" alt="" />
          <div class="fly-top-num">
            <p>本季度面积</p>
            <p>
              <span>{{ seasonData.area.toFixed(2) }}</span
              >km
            </p>
          </div>
          <div class="fly-top-mom">
            <p style="color: #0884ff">
              <img v-if="areaSeasonCompare === 'up'" src="@/assets/img/census/blue_up.png" alt="" />
              <img v-if="areaSeasonCompare === 'down'" src="@/assets/img/census/blue_down.png" alt="" />{{
                areaSeason
              }}%
            </p>
            <span>与上季度比</span>
          </div>
        </div>
      </div>
      <div class="fly-bottom" style="margin-top: 40px" v-if="monthData">
        <p class="fly-bottom-title">本月飞行</p>
        <div class="fly-bottom-item">
          <img src="@/assets/img/census/icon_time.png" alt="" />
          <div class="fly-bottom-num">
            <p>本月里程</p>
            <p>
              <span>{{ monthData.meter.toFixed(2) }}</span
              >km
            </p>
          </div>
          <div class="fly-bottom-mom">
            <p>
              <img v-if="meterMonthCompare === 'up'" src="@/assets/img/census/green_up.png" alt="" /><img
                v-if="meterMonthCompare === 'down'"
                src="@/assets/img/census/green_down.png"
                alt=""
              />{{ meterMonth }}%
            </p>
            <span>与上月比</span>
          </div>
        </div>
        <div class="fly-bottom-item">
          <img src="@/assets/img/census/icon_area_small.png" alt="" />
          <div class="fly-bottom-num">
            <p>本月面积</p>
            <p>
              <span>{{ monthData.area.toFixed(2) }}</span
              >km
            </p>
          </div>
          <div class="fly-bottom-mom">
            <p style="color: #0884ff">
              <img v-if="areaMonthCompare === 'up'" src="@/assets/img/census/blue_up.png" alt="" /><img
                v-if="areaMonthCompare === 'down'"
                src="@/assets/img/census/blue_down.png"
                alt=""
              />{{ areaMonth }}%
            </p>
            <span>与上月比</span>
          </div>
        </div>
      </div>
    </div>
    <div class="line"></div>
    <div class="line2"></div>
    <!-- 飞机面积图表 -->
    <div class="flight-echarts">
      <el-tabs v-model="activeName" class="echarts-tabs" @tab-click="handleClick($event)">
        <el-tab-pane label="飞行面积" name="area"></el-tab-pane>
        <el-tab-pane label="飞行里程" name="meter"></el-tab-pane>
      </el-tabs>
      <div class="echarts-month">
        <p :class="active === 'season' ? 'active' : ''" @click="clickMonth('season')">本季度</p>
        <p :class="active === 'month' ? 'active' : ''" @click="clickMonth('month')">本月</p>
      </div>
      <div class="echarts-con">
        <div class="echarts-con-left">
          <div class="echarts-con-left-list">
            <p class="echarts-con-left-list-title">{{ columnTitle }}</p>
            <div class="echarts-con-left-list-con">
              <div class="echarts-con-left-list-item" v-for="(item, index) in flightRank" :key="index">
                <p :class="`item-${index + 1}`">{{ index + 1 }}</p>
                <span :title="item.unit_name">{{ item.unit_name }}</span>
              </div>
            </div>
          </div>
          <div id="column" ref="column"></div>
        </div>
        <div class="echarts-con-right">
          <div class="echarts-con-right-census">
            <p class="census-title">{{ cakeTitle }}</p>
            <div class="census-list">
              <div class="census-list-item" v-for="(item, index) in cakeCensusList" :key="index">
                <p :style="item.color"></p>
                <span>{{ item.brand_name }}</span>
                <p></p>
                <span>{{ item.ratio }}</span>
              </div>
            </div>
          </div>
          <div id="cake" ref="cake"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {EChartsOption, init} from 'echarts';
import censusApi from '@/api/census.ts';

const activeName = ref('area');
const active = ref('month');
const columnTitle = ref('飞行面积统计排名（按公司）');
const cakeTitle = ref('飞行面积统计（按品牌）');

const taskNumData = ref(); // 统计总和
const monthData = ref(); // 月度数据
const seasonData = ref(); // 季度数据
const areaMonthCompare = ref('up'); // 面积月度环比
const meterMonthCompare = ref('up'); // 里程月度环比
const areaSeasonCompare = ref('up'); // 面积季度环比
const meterSeasonCompare = ref('up'); // 里程季度环比
const areaMonth = ref('');
const meterMonth = ref('');
const areaSeason = ref('');
const meterSeason = ref('');

const flightRank = ref([]);
const columnData = ref([]);
const columnNameList = ref([]);
const cakeCensusList = ref([]);
const cakeChartList = ref([]);

// tbs切换
const handleClick = (event: any) => {
  activeName.value = event.props.name;
  if (activeName.value === 'area') {
    columnTitle.value = '飞行面积统计排名（按公司）';
    cakeTitle.value = '飞行面积统计（按品牌）';
    initColumnChart();
    initCakeChart();
  } else {
    columnTitle.value = '飞行里程统计排名（按公司）';
    cakeTitle.value = '飞行里程统计（按品牌）';
    initColumnChart();
    initCakeChart();
  }
};

// 切换月度季度
const clickMonth = (index) => {
  active.value = index;
  initColumnChart();
  initCakeChart();
};

// 获取公司排名
const getUnitRank = async () => {
  const res = await censusApi.taskRank({type: 'unit_name', time: active.value, field: activeName.value});
  flightRank.value = res.data;
  columnData.value = [];
  columnNameList.value = [];
  res.data.forEach((item) => {
    columnData.value.push(item.value.toFixed(2));
    columnNameList.value.push(item.unit_name);
  });
};
// 获取品牌排名
const getBrandeRank = async () => {
  const res = await censusApi.taskRank({type: 'brand_name', time: active.value, field: activeName.value});
  const colorList = [
    'background:#018EF6',
    'background:#00E0FF',
    'background:#F35E5A',
    'background:#01F398',
    'background:#486FF9',
  ];
  const ratioList = [];
  cakeChartList.value = [];

  res.data.forEach((item, index) => {
    ratioList.push(item.value.toFixed(2));
    cakeChartList.value.push({value: item.value.toFixed(2), name: item.brand_name});
  });
  cakeCensusList.value = res.data.map((item, index) => {
    item.color = colorList[index];
    item.ratio = countPercentage(ratioList)[index];
    return item;
  });
};

// 获取任务总和数据
const getTaskNum = async () => {
  const res = await censusApi.taskSum();
  taskNumData.value = res.data;
  monthData.value = res.data.month;
  seasonData.value = res.data.season;
  // 月度环比
  areaMonth.value = (res.data.month.area - res.data.last_month.area / 100).toFixed(2);
  meterMonth.value = (res.data.month.meter - res.data.last_month.meter / 100).toFixed(2);
  // 季度环比
  areaSeason.value = (res.data.season.area - res.data.last_season.area / 100).toFixed(2);
  meterSeason.value = (res.data.season.meter - res.data.last_season.meter / 100).toFixed(2);
  if (areaMonth.value[0] === '-') {
    areaMonthCompare.value = 'down';
    areaMonth.value = areaMonth.value.slice(1);
  } else {
    areaMonthCompare.value = 'up';
    areaMonth.value = areaMonth.value.slice(0);
  }
  if (meterMonth.value[0] === '-') {
    meterMonthCompare.value = 'down';
    meterMonth.value = meterMonth.value.slice(1);
  } else {
    meterMonthCompare.value = 'up';
    meterMonth.value = meterMonth.value.slice(0);
  }
  if (areaSeason.value[0] === '-') {
    areaSeasonCompare.value = 'down';

    areaSeason.value = areaSeason.value.slice(1);
  } else {
    areaSeasonCompare.value = 'up';
    areaSeason.value = areaSeason.value.slice(0);
  }
  if (meterSeason.value[0] === '-') {
    meterSeasonCompare.value = 'down';
    meterSeason.value = meterSeason.value.slice(1);
  } else {
    meterSeasonCompare.value = 'up';
    meterSeason.value = meterSeason.value.slice(0);
  }
};

const countPercentage = (countArray) => {
  // eslint-disable-next-line no-eval
  const j = eval(countArray.join('+'));
  const resultArray = [];
  for (let i = 0; i < countArray.length; i++) {
    const k = Math.floor((countArray[i] / j) * 100) + '%';
    resultArray.push(k);
  }
  return resultArray;
};

// 柱状图
const initColumnChart = async () => {
  await getUnitRank();
  await getBrandeRank();
  const columnDom = document.getElementById('column') as HTMLElement;
  const columnChart = init(columnDom);
  const columnOption: EChartsOption = {
    dataset: [
      {
        transform: {
          type: 'sort',
          config: {dimension: 'score', order: 'asc'},
        },
      },
    ],
    tooltip: {
      trigger: 'item',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      splitLine: {
        // 柱状图竖线颜色
        // show: false,
        lineStyle: {
          color: ['rgba(255, 255, 255, .1)'],
        },
      },
    },
    yAxis: {
      type: 'category',
      boundaryGap: false,
      // 刻度线
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      data: columnNameList.value.reverse(),
    },
    series: [
      {
        type: 'bar',
        barWidth: 6, // 柱图宽度
        itemStyle: {
          borderRadius: [3],
          color(parmas) {
            const colorList = ['#0884FF', '#00FCFF', '#00FF74', '#0884FF', '#00FCFF', '#00FF74', '#0884FF', '#00FCFF'];
            return colorList[parmas.dataIndex];
          },
        },

        data: columnData.value.reverse(),
      },
    ],
  };

  columnOption && columnChart.setOption(columnOption);
};
// 饼图
const initCakeChart = async () => {
  await getUnitRank();
  await getBrandeRank();
  const cakeDom = document.getElementById('cake') as HTMLElement;
  const cakeChart = init(cakeDom);
  const cakeOption: EChartsOption = {
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        labelLine: {
          show: false,
        },
        itemStyle: {
          borderRadius: [3],
          color(parmas) {
            const colorList = ['#018EF6', '#00E0FF', '#F35E5A', '#01F398', '#486FF9'];
            return colorList[parmas.dataIndex];
          },
        },
        data: cakeChartList.value,
      },
    ],
  };
  cakeOption && cakeChart.setOption(cakeOption);
};
onMounted(() => {
  getTaskNum();
  getUnitRank();
  getBrandeRank();
  initColumnChart();
  initCakeChart();
});
</script>
<style lang="scss" scoped>
.flight {
  display: flex;
  color: #fff;
  p {
    margin: 0;
  }
  .line {
    width: 3px;
    height: 350px;
    margin-top: 70px;
    background: #2c3d83;
  }
  .line2 {
    width: 3px;
    height: 350px;
    margin-top: 70px;
    background: #080f2f;
    color: transparent;
  }
  &-fly {
    padding: 20px 69px;
    .fly-top,
    .fly-bottom {
      &-title {
        font-weight: bold;
        font-size: 18px;
      }
      &-item {
        display: flex;
        align-items: flex-end;
        margin-top: 26px;
      }
      &-num {
        width: 150px;
        margin-left: 15px;
        > p:nth-of-type(1) {
          font-size: 13px;
        }
        > p:nth-of-type(2) {
          font-size: 24px;
          font-weight: bold;
        }
      }
      &-mom {
        margin-left: 36px;
        display: flex;
        padding-bottom: 3px;
        > p {
          display: flex;
          align-items: flex-end;
          font-size: 13px;
          color: #00fcff;
          margin-right: 21px;
          > img {
            margin-right: 2px;
          }
        }
        > span {
          font-size: 12px;
          color: #ffffff;
          opacity: 0.7;
        }
      }
    }
  }
  &-echarts {
    flex: 1;
    padding: 20px 40px;
    color: #fff;
    position: relative;
    &:deep(.el-tabs__item) {
      color: #8188a5;
    }
    &:deep(.el-tabs__item.is-active) {
      font-weight: bold;
      font-size: 18px;
      color: #00fcff;
    }
    &:deep(.el-tabs__active-bar) {
      height: 6px;
      background: #00fcff;
      border-radius: 4px;
    }
    &:deep(.el-tabs__nav-wrap::after) {
      position: absolute;
      bottom: 1px;
      background: #fff;
      opacity: 0.7;
    }
    .echarts-tabs {
      padding-left: 10px;
    }
    .echarts-month {
      position: absolute;
      top: 26px;
      right: 40px;
      display: flex;
      > p {
        cursor: pointer;
        margin-left: 35px;
      }
      .active {
        font-weight: bold;
        color: #378fff;
      }
    }
    .echarts-con {
      justify-content: space-between;
      display: flex;
      &-left {
        margin-top: 20px;
        display: flex;
        &-list {
          padding-right: 20px;
          &-title {
            font-size: 12px;
            margin-top: 20px;
          }
          &-con {
            padding-top: 15px;
            height: 270px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
          }
          &-item {
            display: flex;
            align-items: center;
            > p {
              width: 18px;
              height: 18px;
              text-align: center;
              line-height: 18px;
              margin-right: 11px;
              font-size: 12px;
              font-weight: bold;
              color: #fff;
            }
            > span {
              display: block;
              color: #fff;
              width: 260px;
              opacity: 0.7;
              font-size: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .item-1 {
              background: #00fcff;
              border-radius: 50%;
              color: #19265b;
            }
            .item-2 {
              background: #0094ff;
              border-radius: 50%;
              color: #19265b;
            }
            .item-3 {
              background: #00ff74;
              border-radius: 50%;
              color: #19265b;
            }
          }
        }
      }
      &-right {
        display: flex;
        .census-title {
          margin-top: 40px;
        }
        .census-list {
          margin-top: 60px;
          &-item {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
            > p:nth-of-type(1) {
              width: 12px;
              height: 12px;
              background: #018ef6;
              margin-right: 14px;
            }
            > p:nth-of-type(2) {
              width: 1px;
              height: 12px;
              background: #a6aab8;
              margin: 0 14px;
            }
            > span:nth-of-type(1) {
              display: block;
              width: 80px;
              color: #fff;
              opacity: 0.7;
            }
            > span:nth-of-type(2) {
              color: #fff;
            }
          }
        }
      }
    }
    #column {
      width: 650px;
      height: 350px;
    }
    #cake {
      margin-top: 70px;
      margin-right: 40px;
      width: 300px;
      height: 300px;
    }
  }
}
</style>
